<!DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
    <!--页面加载动画-->
    <div class="body-container">
        <canvas id="clock" width="500" height="500">
            你的浏览器版本过低，请更新最新版本
        </canvas>

    </div>
    <script src="./jquery.min.js?v=@@hash"></script>
    <script type="text/javascript ">
        $(function() {

            //1.介绍arc 画圆弧方法；
            //http://www.w3school.com.cn/tags/canvas_arc.asp
            //使用 canvas 画布，首先都应该先获取它的绘图上下文环境
            var canvas = document.getElementById('clock');
            var cxt = canvas.getContext('2d');
            var width = canvas.width;
            var height = canvas.height;
            var r = width / 2;
            //获取了 canvas 元素的宽高，同时定义半径 r 为最大的半径，即宽度的一半。
            // 绘制真实时间
            draw();
            setInterval(function() {
                draw();
            }, 1000);

            function draw() {
                cxt.clearRect(0, 0, width, height);
                var date = new Date();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                drawBg();
                drawHour(hour, minute); //时针
                drawMinute(minute); //分针
                drawSecond(second); //秒针
                drawDot(); // 画中心点
                cxt.restore();
            }

            function drawBg() {
                //重置原点
                cxt.save();
                cxt.translate(r, r);

                // 画时钟外圈
                cxt.beginPath(); //开始绘制
                cxt.arc(0, 0, r - 5, 0, 2 * Math.PI, true); //绘制表盘
                cxt.lineWidth = 8; //线宽
                cxt.stroke(); //绘制

                //画小时数
                var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

                hour.forEach(function(num, i) {
                    var rad = 2 * Math.PI / 12 * i;
                    var x = Math.cos(rad) * (r - 30);
                    var y = Math.sin(rad) * (r - 30);
                    cxt.font = "18px sans-serif" //字体样式
                    cxt.textAlign = "center";
                    cxt.textBaseline = "middle";
                    cxt.fillText(num, x, y); //绘制数字 文本
                });

                // 画刻度
                for (var i = 0; i < 60; i++) {
                    var rad = 2 * Math.PI / 60 * i;
                    var x = Math.cos(rad) * (r - 18);
                    var y = Math.sin(rad) * (r - 18);

                    cxt.beginPath(); //开始绘制
                    if (i % 5 == 0) {
                        cxt.fillStyle = "#000";
                        cxt.arc(x, y, 2, 0, 2 * Math.PI, true);
                    } else {
                        cxt.fillStyle = "#bbb";
                        cxt.arc(x, y, 2, 0, 2 * Math.PI, true);
                    }
                    cxt.fill(); // 方法填充当前的图像（路径）。默认颜色是黑色。
                }
            }
            // 画时针
            //save方法用于临时保存画布坐标系统的状态
            //restore方法可以用来恢复save之后设置的状态,
            function drawHour(hour, minute) {
                cxt.save();
                var rad = 2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * minute / 60; //小时度数+分钟度数
                cxt.beginPath(); //开始绘制
                cxt.rotate(rad); //旋转
                cxt.moveTo(0, 15); //开始绘制的点
                cxt.lineTo(0, -r / 2); //下一个点
                cxt.lineWidth = 5; //线宽
                cxt.lineCap = "round"; //线帽。线的末端为圆弧 butt-默认。向线条的每个末端添加平直的边缘。square-向线条的每个末端添加正方形线帽。
                cxt.stroke();
                cxt.restore();
            }
            // 画分针
            function drawMinute(minute) {
                cxt.save();
                var rad = 2 * Math.PI / 60 * minute;
                cxt.beginPath();
                cxt.rotate(rad);
                cxt.moveTo(0, 18);
                cxt.lineTo(0, -r + 40);
                cxt.lineWidth = 3;
                cxt.lineCap = "round";
                cxt.stroke();
                cxt.restore();
            }
            // 画秒针
            function drawSecond(second) {
                cxt.save();
                var rad = 2 * Math.PI / 60 * second;
                cxt.beginPath();
                cxt.rotate(rad);
                cxt.moveTo(0, 25);
                cxt.lineTo(2, 25);
                cxt.lineTo(-2, 25);
                cxt.lineTo(-1, -r + 25);
                cxt.lineTo(1, -r + 25);
                cxt.lineTo(2, 25);
                cxt.lineWidth = 1;
                cxt.fillStyle = "#f00";
                cxt.fill();
                cxt.restore();
            }
            // 画中心点
            function drawDot() {
                cxt.beginPath();
                cxt.arc(0, 0, 4, 0, 2 * Math.PI, true);
                cxt.fillStyle = "#fff";
                cxt.fill();
            }



            // var Img = new Image(),//转换成img
            //     dataURL = '';
            // Img.src = url;
            // var canvas = document.createElement("canvas"), //创建canvas元素
            //     width = Img.width, //确保canvas的尺寸和图片一样
            //     height = Img.height;
            // canvas.width = width;
            // canvas.height = height;
            // canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
            // dataURL = canvas.toDataURL('image/jpeg'); //转换图片为dataURL



        })
    </script>
</body>

</html>